
<!--       deptmgr部门管理 -->
<template>
  <a-card :bordered="false" style="margin: 6px">
    <m-table
    
      childrenColumnName="Childs"
      ref="tableRef"
      :columns="columns"
      :data="loadData"
      :alert="options.alert.show"
      bordered
      :row-key="(record) => record.ID"
      :tool-config="toolConfig"
      :row-selection="options.rowSelection"
      :show-pagination="true"
      :expandedRowKeys="expandedRowKeys"
      @onExpand="expand"
      :indentSize="20"
      :scroll="{ x: 'max-content' }"
      :expandFixed="true"
    >
      <template #operator>
        <a-space>
          <a-button type="primary" @click="formRef.onOpen()" v-show="hasAddRole(route.meta.RolePower)">
            <template #icon><plus-outlined /></template>
            新增部门
          </a-button>
        </a-space>
      </template>
      
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'icon'">
          <a-tag :color="record.color">
            <component :is="record.icon" />
          </a-tag>
        </template>
        <template v-if="column.dataIndex === 'action'">
          <a-space>
            <a-button type="link" @click="formRef.onOpen(record)" v-show="hasEditRole(route.meta.RolePower)">编辑</a-button>
            <a-divider type="vertical" />
            <a-popconfirm
              title="确定删除？"
              @confirm="deleteModule(record)"
              ok-text="确定"
              cancel-text="关闭"
            >
              <a-button type="link" danger size="small" v-show="hasDeleteRole(route.meta.RolePower)">删除</a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </template>
    </m-table>
  </a-card>
  <!-- -->
  <Form ref="formRef" @successful="tableRef.refresh(true)" />
</template>
  
  <script setup name="deptmgr">
import Form from "./form.vue";
import { ref, computed } from "vue";
import { message } from "ant-design-vue";
import deptmgrApi from "@/api/systemManagement/deptmgrApi";
import { useRoute } from "vue-router";
const route = useRoute();
const searchFormState = ref({
  ID: 0,
  PID: 0,
  DeptName: "",
});
const formRef = ref();

const tableRef = ref();
const toolConfig = {
  refresh: true,
  height: true,
  columnSetting: false,
  striped: false,
};
const columns = [

  {
    title: "	部门名称",
    dataIndex: "DeptName",
    align: "left",
  },
  {
    title: "部门描述",
    dataIndex: "DeptDesp",
    align: "center",
  },

  {
    title: "操作",
    dataIndex: "action",
    align: "center",
    width: "200px",
  },
];
// 列表选择配置
const options = {
  alert: {
    show: false,
    clear: () => {
      selectedRowKeys = ref([]);
    },
  },
};
// 进行数据转换,删掉空的子数组,不然会展示一个无法展开的展开按钮
const transformChilds = (arr) => {
  for (let i = 0; i < arr.length; i++) {
    if (arr[i].Childs.length > 0) {
      transformChilds(arr[i].Childs);
    } else {
      delete arr[i].Childs;
    }
  }
};
const data = ref();
// 展开行配置数组
let expandedRowKeys = ref([]);

const loadData = (parameter) => {
  return deptmgrApi
    .getDepts(Object.assign(parameter, searchFormState.value))
    .then((res) => {
      let Data = res.Data;
      transformChilds(Data);
      data.value = Data;
      for (let i = 0; i < data.value.length; i++) {
        if (data.value[i].ID) {
          expandedRowKeys.value.push(data.value[i].ID);
        }
      }

      return { Data };
    });
};
const expand = (e, item) => {
  if (!e) {
    expandedRowKeys.value.splice(
      expandedRowKeys.value.findIndex((i) => i == item.ID),
      1
    );
  } else {
    expandedRowKeys.value.push(item.ID);
  }
};

// 删除
const deleteModule = (record) => {
  let params = {
    ID: record.ID,
    DeptName:record.DeptName
  };
  deptmgrApi.deleteDept(params).then(() => {
    message.success("删除成功");
    tableRef.value.refresh();
  });
};
</script>
<style lang="scss" scoped>
.deptmgr {
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  & > div {
    height: 100%;
    overflow: auto;
  }
  .deptmgr_tree {
    flex: 3;
    margin-right: 10px;
  }
  .deptmgr_content {
    flex: 8;
  }
}
</style>
  